<template>
  <div class="Zi">
    <h2>这是子组件区域</h2>

    <div v-for="item in list" :key="item.id">{{ item.id }}-{{ item.name }}-{{ item.age }}</div>

    <button @click="send">传值给父</button>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

// const props = defineProps(['list'])
const props = defineProps({
  list: {
    type: Array,
    default: () => [{ id: '666', name: '默认名', age: 60 }]
  }
})
console.log(props.list)

const emit = defineEmits(['sendData'])
const send = () => {
  emit('sendData', '哎呦你干嘛')
}
</script>

<style lang="scss" scoped>
.Zi {
  background-color: #e9be7e;
  margin: 30px;
  padding: 10px;
}
</style>
